<!doctype html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico in the root directory -->
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="icon" href="favicon.ico">

    <link href="https://fonts.googleapis.com/css?family=Poppins:100,300,400,700,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">

    <title>Dashcore - Premium Software & Startup HTML</title><!-- themeforest:css -->
    <link rel="stylesheet" href="../css/all.css">
    <link rel="stylesheet" href="../css/aos.css">
    <link rel="stylesheet" href="../css/cookieconsent.min.css">
    <link rel="stylesheet" href="../css/magnific-popup.css">
    <link rel="stylesheet" href="../css/odometer-theme-minimal.css">
    <link rel="stylesheet" href="../css/prism-okaidia.css">
    <link rel="stylesheet" href="../css/simplebar.css">
    <link rel="stylesheet" href="../css/smart_wizard.css">
    <link rel="stylesheet" href="../css/smart_wizard_theme_arrows.css">
    <link rel="stylesheet" href="../css/smart_wizard_theme_circles.css">
    <link rel="stylesheet" href="../css/smart_wizard_theme_dots.css">
    <link rel="stylesheet" href="../css/swiper.css">
    <link rel="stylesheet" href="../css/theme.css">
    <link rel="stylesheet" href="../css/rtl.css"><!-- endinject -->
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->


    <nav class="st-nav navbar main-nav navigation fixed-top">
    <div class="container">
        <ul class="st-nav-menu nav navbar-nav">
            <li class="st-nav-section nav-item">
                <a href="#main" class="navbar-brand">
                    <img src="../img/logo.png" alt="Dashcore"
                        class="logo logo-sticky d-block d-md-none" />
                </a>
            </li>
            <li class="st-nav-section st-nav-primary nav-item">
                <a class="st-root-link item-products nav-link">
                    Home
                </a>

                <a class="st-root-link item-pages st-has-dropdown nav-link" data-dropdown="pages">
                    Pages
                </a>
                <a class="st-root-link item-blocks st-has-dropdown nav-link" data-dropdown="blocks">
                    Blocks
                </a>
                <a class="st-root-link item-components st-has-dropdown nav-link" data-dropdown="components">
                    UI Components
                </a>
                <a class="st-root-link item-blog st-has-dropdown nav-link" data-dropdown="blog">
                    Blog
                </a>
                <a class="st-root-link item-shop st-has-dropdown nav-link" href="../shop/" data-dropdown="shop">
                    Shop
                </a>
            </li>

            <!-- Mobile Navigation -->
            <li class="st-nav-section st-nav-mobile nav-item">
                <button class="st-root-link navbar-toggler" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="st-popup">
                    <div class="st-popup-container">
                        <a class="st-popup-close-button">Close</a>
                        <div class="st-dropdown-content-group">
                            <h4 class="text-uppercase regular">Pages</h4>

                            
                            
                            <a class="regular text-primary" href="../about.html">
                                <i class="far fa-building icon"></i> About
                            </a>
                            
                            <a class="regular text-success" href="../contact.html">
                                <i class="far fa-envelope icon"></i> Contact
                            </a>
                            
                            <a class="regular text-warning" href="../pricing.html">
                                <i class="fas fa-hand-holding-usd icon"></i> Pricing
                            </a>
                            
                            <a class="regular text-info" href="../faqs.html">
                                <i class="far fa-question-circle icon"></i> FAQs
                            </a>
                            
                        </div>

                        <div class="st-dropdown-content-group b-t bw-2">
                            <h4 class="text-uppercase regular">Components</h4>

                            <div class="row">
                                <div class="col mr-4">
                                    <a target="_blank" href="../components/alert.html">Alerts</a>
                                    <a target="_blank" href="../components/badge.html">Badges</a>
                                    <a target="_blank" href="../components/button.html">Buttons</a>
                                    <a target="_blank" href="../components/color.html">Colors</a>
                                    <a target="_blank" href="../components/accordion.html">Accordion</a>
                                    <a target="_blank" href="../components/cookie-law.html">Cookielaw</a>
                                </div>

                                <div class="col mr-4">
                                    <a target="_blank" href="../components/overlay.html">Overlay</a>
                                    <a target="_blank" href="../components/progress.html">Progress</a>
                                    <a target="_blank" href="../components/lightbox.html">Lightbox</a>
                                    <a target="_blank" href="../components/tab.html">Tabs</a>
                                    <a target="_blank" href="../components/tables.html">Tables</a>
                                    <a target="_blank" href="../components/typography.html">Typography</a>
                                </div>
                            </div>
                        </div>

                        <div class="st-dropdown-content-group bg-light b-t">
                            <a target="_blank" href="../components/wizard.html">Wizard <span
                                    class="badge badge-pill badge-primary">New</span></a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div class="st-dropdown-root">
        <div class="st-dropdown-bg">
            <div class="st-alt-bg"></div>
        </div>
        <div class="st-dropdown-arrow"></div>
        <div class="st-dropdown-container">
            <div class="st-dropdown-section" data-dropdown="pages">
                <div class="st-dropdown-content">
                    <div class="st-dropdown-content-group">
                        <div class="mb-4">
                            <h3 class="text-darker light text-nowrap"><span class="bold regular">Useful pages</span>
                                you'll
                                need</h3>
                            <p class="text-secondary mt-0">Get a complete design stack</p>
                        </div>

                        <div class="row">
                            <div class="col">
                                <ul class="mr-4">
                                    <li>
                                        <h4 class="text-uppercase regular">Error</h4>
                                    </li>
                                    <li><a target="_blank" href="../403.html">403 Error</a></li>
                                    <li><a target="_blank" href="../404.html">404 Error</a></li>
                                    <li><a target="_blank" href="../405.html">405 Error</a></li>
                                </ul>
                            </div>
                            <div class="col">
                                <ul class="mr-4">
                                    <li>
                                        <h4 class="text-uppercase regular">User</h4>
                                    </li>
                                    <li><a target="_blank" href="../login.html">Login</a></li>
                                    <li><a target="_blank" href="../register.html">Register</a></li>
                                    <li><a target="_blank" href="../forgot.html">Forgot</a></li>
                                </ul>
                            </div>
                            <div class="col">
                                <ul>
                                    <li>
                                        <h4 class="text-uppercase regular">Extra</h4>
                                    </li>
                                    <li><a target="_blank" href="../pricing.html">Pricing</a></li>
                                    <li><a target="_blank" href="../terms.html">Terms</a></li>
                                    <li><a target="_blank" href="../faqs.html">FAQ</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="st-dropdown-content-group">
                        <a class="dropdown-item bold" target="_blank" href="../about.html">
                            <i class="far fa-building icon"></i> About
                        </a>
                        <a class="dropdown-item bold" target="_blank" href="../contact.html">
                            <i class="far fa-envelope icon"></i> Contact
                        </a>
                        <a class="dropdown-item bold" target="_blank" href="../pricing.html">
                            <i class="fas fa-hand-holding-usd icon"></i> Pricing
                        </a>
                    </div>
                </div>
            </div>
            <div class="st-dropdown-section" data-dropdown="blocks">
                <div class="st-dropdown-content">
                    <div class="st-dropdown-content-group">
                        <div class="row">
                            <div class="col mr-4">
                                <a class="dropdown-item" target="_blank"
                                    href="../blocks/call-to-action.html">Call to actions</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../blocks/contact.html">Contact</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../blocks/counter.html">Counters</a>
                                <a class="dropdown-item" target="_blank" href="../blocks/faqs.html">FAQs</a>
                            </div>
                            <div class="col mr-4">
                                <a class="dropdown-item" target="_blank"
                                    href="../blocks/footer.html">Footers</a>
                                <a class="dropdown-item" target="_blank" href="../blocks/form.html">Forms</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../blocks/navbar.html">Navbar</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../blocks/navigation.html">Navigation</a>
                            </div>
                            <div class="col">
                                <a class="dropdown-item" target="_blank"
                                    href="../blocks/pricing.html">Pricing</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../blocks/slider.html">Sliders</a>
                                <a class="dropdown-item" target="_blank" href="../blocks/team.html">Team</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../blocks/testimonial.html">Testimonials</a>
                            </div>
                        </div>
                    </div>

                    <div class="st-dropdown-content-group">
                        <h3 class="link-title">
                            <i class="fas fa-long-arrow-alt-right icon"></i> Coming soon
                        </h3>
                        <div class="ml-5">
                            <span class="dropdown-item text-secondary">
                                Dividers
                            </span>
                            <span class="dropdown-item text-secondary">
                                Gallery
                            </span>
                            <span class="dropdown-item text-secondary">
                                Screenshots
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="st-dropdown-section" data-dropdown="components">
                <div class="st-dropdown-content">
                    <div class="st-dropdown-content-group">
                        
                        
                        <a class="dropdown-item" target="_blank" href="../components/color.html">
                            <div class="media align-items-center mb-2">
                                <div class="bg-dark text-contrast icon-md center-flex rounded-circle mr-3">
                                    <i class="fas fa-palette"></i>
                                </div>

                                <div class="media-body">
                                    <h3 class="link-title m-0">Colors</h3>
                                    <p class="m-0 text-secondary">Get to know DashCore color options</p>
                                </div>
                            </div>
                        </a>
                        
                        <a class="dropdown-item" target="_blank" href="../components/form-controls.html">
                            <div class="media align-items-center mb-2">
                                <div class="bg-secondary text-contrast icon-md center-flex rounded-circle mr-3">
                                    <i class="fab fa-wpforms"></i>
                                </div>

                                <div class="media-body">
                                    <h3 class="link-title m-0">Forms</h3>
                                    <p class="m-0 text-secondary">All forms elements</p>
                                </div>
                            </div>
                        </a>
                        
                        <a class="dropdown-item" target="_blank" href="../components/accordion.html">
                            <div class="media align-items-center mb-2">
                                <div class="bg-success text-contrast icon-md center-flex rounded-circle mr-3">
                                    <i class="fas fa-bars"></i>
                                </div>

                                <div class="media-body">
                                    <h3 class="link-title m-0">Accordion</h3>
                                    <p class="m-0 text-secondary">Useful accordion elements</p>
                                </div>
                            </div>
                        </a>
                        
                        <a class="dropdown-item" target="_blank" href="../components/cookie-law.html">
                            <div class="media align-items-center mb-4">
                                <div class="bg-info text-contrast icon-md center-flex rounded-circle mr-3">
                                    <i class="fas fa-cookie-bite"></i>
                                </div>

                                <div class="media-body">
                                    <h3 class="link-title m-0">CookieLaw</h3>
                                    <p class="m-0 text-secondary">Comply with the hideous EU Cookie Law</p>
                                </div>
                            </div>
                        </a>
                        

                        <h4 class="text-uppercase regular">Huge components list</h4>
                        <div class="row">
                            <div class="col mr-4">
                                <a class="dropdown-item" target="_blank"
                                    href="../components/alert.html">Alerts</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../components/badge.html">Badges</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../components/button.html">Buttons</a>
                            </div>

                            <div class="col mr-4">
                                <a class="dropdown-item" target="_blank"
                                    href="../components/overlay.html">Overlay</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../components/progress.html">Progress</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../components/lightbox.html">Lightbox</a>
                            </div>

                            <div class="col mr-4">
                                <a class="dropdown-item" target="_blank"
                                    href="../components/tab.html">Tabs</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../components/tables.html">Tables</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../components/typography.html">Typography</a>
                            </div>
                        </div>
                    </div>

                    <div class="st-dropdown-content-group">
                        <a class="dropdown-item" target="_blank" href="../components/wizard.html">Wizard <span
                                class="badge badge-pill badge-primary">New</span></a>
                        <span class="dropdown-item d-flex align-items-center text-muted">Timeline <i
                                class="fas fa-ban ml-auto"></i></span>
                        <span class="dropdown-item d-flex align-items-center text-muted">Process <i
                                class="fas fa-ban ml-auto"></i></span>
                    </div>
                </div>
            </div>
            <div class="st-dropdown-section" data-dropdown="blog">
                <div class="st-dropdown-content">
                    <div class="st-dropdown-content-group">
                        <div class="row">
                            <div class="col mr-4">
                                <h4 class="regular text-uppercase">Full width</h4>
                                <a class="dropdown-item" target="_blank" href="../blog/blog-post.html">Single
                                    post</a>
                                <a class="dropdown-item" target="_blank" href="../blog/blog-grid.html">Posts
                                    Grid</a>
                            </div>
                            <div class="col mr-4">
                                <h4 class="regular text-uppercase">Sidebar left</h4>
                                <a class="dropdown-item" target="_blank"
                                    href="../blog/blog-post-sidebar-left.html">Single post</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../blog/blog-grid-sidebar-left.html">Posts Grid</a>
                            </div>
                            <div class="col mr-4">
                                <h4 class="regular text-uppercase">Sidebar right</h4>
                                <a class="dropdown-item" target="_blank"
                                    href="../blog/blog-post-sidebar-right.html">Single post</a>
                                <a class="dropdown-item" target="_blank"
                                    href="../blog/blog-grid-sidebar-right.html">Posts Grid</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="st-dropdown-section" data-dropdown="shop">
                <div class="st-dropdown-content">
                    <div class="st-dropdown-content-group">
                        <a class="dropdown-item" target="_blank" href="../shop/home.html">
                            <div class="media align-items-center">
                                <div class="bg-success text-contrast icon-md center-flex rounded-circle mr-3">
                                    <i class="fas fa-shopping-basket"></i>
                                </div>

                                <div class="media-body">
                                    <h3 class="link-title m-0">Home</h3>
                                    <p class="m-0 text-secondary">Online store home with an outstanding UX</p>
                                </div>
                            </div>
                        </a>

                        <a class="dropdown-item" target="_blank" href="../shop/cart.html">
                            <div class="media align-items-center">
                                <div class="bg-info text-contrast icon-md center-flex rounded-circle mr-3">
                                    <i class="fas fa-shopping-cart"></i>
                                </div>

                                <div class="media-body">
                                    <h3 class="link-title m-0">Cart</h3>
                                    <p class="m-0 text-secondary">Online store shopping cart</p>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="st-dropdown-content-group">
                        <h3 class="link-title">
                            <i class="fas fa-money-check-alt icon"></i> Checkout
                        </h3>

                        <div class="ml-5">
                            <a class="dropdown-item text-secondary" target="_blank" href="../shop/checkout-customer.html">
                                Customer
                                <i class="fas fa-angle-right ml-2"></i>
                            </a>
                            <a class="dropdown-item text-secondary" target="_blank" href="../shop/checkout-shipping.html">
                                Shipping Information
                                <i class="fas fa-angle-right ml-2"></i>
                            </a>
                            <a class="dropdown-item text-secondary" target="_blank" href="../shop/checkout-payment.html">
                                Payment Methods
                                <i class="fas fa-angle-right ml-2"></i>
                            </a>
                            <a class="dropdown-item text-secondary" target="_blank" href="../shop/checkout-confirmation.html">
                                Order Review
                                <i class="fas fa-angle-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>


<main >
    
    <header class="page header text-contrast overlay gradient gradient-purple-blue alpha-8 image-background cover"
    style="background-image: url('../img/bg/waves.jpg')">
    <div class="container">
        
        <div class="row">
            <div class="col-md-6">
                <h1 class="display-4 text-contrast mb-4">Forms Elements</h1>
                
                <p class="lead text-contrast">Multiple form elements to create awesome forms</p>
                
            </div>
        </div>
        
    </div>
</header>

    <div class="container-fluid py-3 demo-blocks">
    
    <section class="section form-basic">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Basic form inputs</h5>
                    </div>
                    <div class="card-body">
                        <form action=";" class="cozy">
                            <div class="form-group">
                                <label for="exampleInputEmailBase">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmailBase" aria-describedby="emailHelp" placeholder="Enter email">
                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPasswordBase">Password</label>
                                <input type="password" class="form-control" id="exampleInputPasswordBase" placeholder="Password">
                            </div>
                            <div class="form-group checkbox">
                                <input type="checkbox" class="form-check-input" id="exampleCheckBase">
                                <label class="form-check-label" for="exampleCheckBase">Check me out</label>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlSelectMultipleBase">Example select</label>
                                <select class="form-control" id="exampleFormControlSelectMultipleBase">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlTextareaBase">Example textarea</label>
                                <textarea class="form-control" id="exampleFormControlTextareaBase" rows="3"></textarea>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Rounded inputs</h5>
                    </div>
                    <div class="card-body">
                        <form action=";" class="cozy">
                            <div class="form-group">
                                <label for="exampleInputEmailRounded">Email address</label>
                                <input type="email" class="form-control form-control-rounded" id="exampleInputEmailRounded" aria-describedby="emailHelp" placeholder="Enter email">
                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPasswordRounded">Password</label>
                                <input type="password" class="form-control form-control-rounded" id="exampleInputPasswordRounded" placeholder="Password">
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlSelectMultipleRounded">Example select</label>
                                <select class="form-control form-control-rounded" id="exampleFormControlSelectMultipleRounded">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlSelectRounded">Example multiple select</label>
                                <select multiple="multiple" class="form-control form-control-rounded" id="exampleFormControlSelectRounded">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleFormControlTextareaRounded">Example textarea</label>
                                <textarea class="form-control form-control-rounded" id="exampleFormControlTextareaRounded" rows="3"></textarea>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Inputs with icons</h5>
                    </div>
                    <div class="card-body">
                        <form action=";" class="cozy">
                            <fieldset>
                                <legend class="bold small text-uppercase">Default inputs</legend>
                                <div class="form-group has-icon">
                                    <input type="text" id="exampleInputIconRight" class="form-control" placeholder="Right icon">
                                    <i class="icon fas fa-user"></i>
                                </div>
                                <div class="form-group has-icon icon-left">
                                    <input type="text" id="exampleInputIconLeft" class="form-control" placeholder="Left icon">
                                    <i class="icon fas fa-user"></i>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Rounded inputs</legend>
                                <div class="form-group has-icon">
                                    <input type="text" id="exampleInputIconRightRounded" class="form-control form-control-rounded" placeholder="Right icon">
                                    <i class="icon fas fa-user"></i>
                                </div>
                                <div class="form-group has-icon icon-left">
                                    <input type="text" id="exampleInputIconLeftRounded" class="form-control form-control-rounded" placeholder="Left icon">
                                    <i class="icon fas fa-user"></i>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Sizing inputs</legend>
                                <div class="form-group has-icon">
                                    <input type="text" id="exampleInputIconRightLg" class="form-control form-control-lg" placeholder="Right icon - input large">
                                    <i class="icon fas fa-user"></i>
                                </div>
                                <div class="form-group has-icon icon-left">
                                    <input type="text" id="exampleInputIconLeftSm" class="form-control form-control-sm" placeholder="Left icon - input small">
                                    <i class="icon fas fa-user"></i>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Animation icons</legend>
                                <div class="form-group has-icon icon-left">
                                    <input type="text" id="exampleInputIconLeftAnimated" class="form-control" placeholder="Left icon - fa-sync fa-spin">
                                    <i class="icon fas fa-sync fa-spin"></i>
                                </div>
                                <div class="form-group has-icon icon-left">
                                    <input type="text" id="exampleInputIconLeftAnimated2" class="form-control" placeholder="Left icon - fa-spinner fa-pulse">
                                    <i class="icon fas fa-spinner fa-pulse"></i>
                                </div>
                                <div class="form-group has-icon">
                                    <input type="text" id="exampleInputIconRightAnimated" class="form-control" placeholder="Right icon - fa-sync fa-spin">
                                    <i class="icon fas fa-sync fa-spin"></i>
                                </div>
                                <div class="form-group has-icon">
                                    <input type="text" id="exampleInputIconRightAnimated2" class="form-control" placeholder="Right icon - fa-spinner fa-pulse">
                                    <i class="icon fas fa-spinner fa-pulse"></i>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast d-flex flex-column flex-md-row">
                        <h5 class="mb-0">Text options</h5>
                    </div>
                    <div class="card-body">
                        <form action=";" class="form cozy">
                            <div class="form-group">
                                <label for="exampleInputThin">Input with thin font</label>
                                <input type="text" class="form-control thin" id="exampleInputThin" placeholder="Input with thin font" value="Input with thin font">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputLight">Input with light font</label>
                                <input type="text" class="form-control light" id="exampleInputLight" placeholder="Input with light font" value="Input with light font">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputRegular">Input with regular font</label>
                                <input type="text" class="form-control regular" id="exampleInputRegular" placeholder="Input with regular font" value="Input with regular font">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputBold">Input with bold font</label>
                                <input type="text" class="form-control bold" id="exampleInputBold" placeholder="Input with bold font" value="Input with bold font">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputExtraBold">Input with bold font</label>
                                <input type="text" class="form-control extra-bold" id="exampleInputExtraBold" placeholder="Input with extra-bold font" value="Input with extra-bold font">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputCapitalized">Input with bold font</label>
                                <input type="text" class="form-control text-capitalize" id="exampleInputCapitalized" placeholder="Input with capitalized text" value="Input with capitalized text">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputUpperCase">Input with upper case</label>
                                <input type="text" class="form-control text-uppercase" id="exampleInputUpperCase" placeholder="Input with upper case" value="Input with upper case text">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputTextCenter">Input with centered text</label>
                                <input type="text" class="form-control text-center" id="exampleInputTextCenter" placeholder="Input with centered text" value="Input with centered text">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputTextRight">Input with right aligned text</label>
                                <input type="text" class="form-control text-right" id="exampleInputTextRight" placeholder="Input with right aligned text" value="Input with right aligned text">
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Validation states</h5>
                    </div>
                    <div class="card-body">
                        <form action=";" class="cozy">
                            <fieldset>
                                <legend class="bold small text-uppercase">Default inputs</legend>
                                <div class="form-group">
                                    <input type="text" id="exampleInputIconRight2" class="form-control is-valid" placeholder="Valid state">
                                    <small class="form-text text-success">Valid state helper</small>
                                </div>
                                <div class="form-group">
                                    <input type="text" id="exampleInputIconLeft2" class="form-control is-invalid" placeholder="Invalid state">
                                    <small class="form-text text-danger">Invalid state helper</small>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Rounded inputs</legend>
                                <div class="form-group">
                                    <input type="text" id="exampleInputIconRightRounded2" class="form-control form-control-rounded is-valid" placeholder="Valid state">
                                </div>
                                <div class="form-group">
                                    <input type="text" id="exampleInputIconLeftRounded2" class="form-control form-control-rounded is-invalid" placeholder="Invalid state">
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Inputs with icon</legend>
                                <div class="form-group has-icon icon-left">
                                    <input type="text" id="exampleInputIconRightLg2" class="form-control is-valid" placeholder="Valid state">
                                    <i class="icon fas fa-check-circle"></i>
                                </div>
                                <div class="form-group has-icon icon-left">
                                    <input type="text" id="exampleInputIconLeftSm2" class="form-control is-invalid" placeholder="Invalid state">
                                    <i class="icon fas fa-times-circle"></i>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>

                <div class="card shadow-box">
                    <div class="card-header bg-contrast d-flex flex-column flex-md-row">
                        <h5 class="mb-0">Sizing options</h5>
                    </div>
                    <div class="card-body">
                        <form action=";" class="form cozy">
                            <fieldset>
                                <legend class="bold small text-uppercase">Input elements</legend>
                                <div class="form-group">
                                    <label for="exampleInputLarge">Large input</label>
                                    <input type="text" class="form-control form-control-lg" id="exampleInputLarge" placeholder="Large input">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputDefault">Default input</label>
                                    <input type="text" class="form-control" id="exampleInputDefault" placeholder="Default input">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputSmall">Small input</label>
                                    <input type="text" class="form-control form-control-sm" id="exampleInputSmall" placeholder="Default input">
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Select inputs</legend>
                                <div class="form-group">
                                    <label for="exampleSelectLarge">Large select</label>
                                    <select type="text" class="form-control form-control-lg" id="exampleSelectLarge">
                                        <option value="1">Option 1</option>
                                        <option value="2">Option 2</option>
                                        <option value="3">Option 3</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="exampleSelectDefault">Default select</label>
                                    <select type="text" class="form-control form-control-sm" id="exampleSelectDefault">
                                        <option value="1">Option 1</option>
                                        <option value="2">Option 2</option>
                                        <option value="3">Option 3</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="exampleSelectSmall">Small select</label>
                                    <select type="text" class="form-control form-control-sm" id="exampleSelectSmall">
                                        <option value="1">Option 1</option>
                                        <option value="2">Option 2</option>
                                        <option value="3">Option 3</option>
                                    </select>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Checkboxes</h5>
                    </div>
                    <div class="card-body">
                        <form action=";" class="cozy">
                            <fieldset>
                                <legend class="bold small text-uppercase">Default unstyled</legend>
                                <div class="form-group">
                                    <div class="form-check-list">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                                            <label class="form-check-label" for="defaultCheck1">Default checkbox</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled="disabled">
                                            <label class="form-check-label" for="defaultCheck2">Disabled checkbox</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Inline</legend>
                                <div class="form-group">
                                    <div class="form-check-list">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
                                            <label class="form-check-label" for="inlineCheckbox1">1</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
                                            <label class="form-check-label" for="inlineCheckbox2">2</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled="disabled">
                                            <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Bootstrap custom</legend>
                                <div class="form-group">
                                    <div class="form-check-list">
                                        <div class="form-check custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck1">
                                            <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
                                        </div>
                                        <div class="form-check custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled="disabled">
                                            <label class="custom-control-label" for="customCheckDisabled">Check this (disabled) checkbox</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Styled Checkboxes</h5>
                    </div>
                    <div class="card-body">
                        <form action=";" class="cozy">
                            <fieldset>
                                <legend class="bold small text-uppercase">Default style</legend>
                                <div class="form-group">
                                    <div class="form-check-list">
                                        <div class="checkbox">
                                            <input type="checkbox" id="exampleCheckStyled1">
                                            <label for="exampleCheckStyled1">Check me out</label>
                                        </div>
                                        <div class="checkbox">
                                            <input type="checkbox" id="exampleCheckStyled2">
                                            <label for="exampleCheckStyled2">Check me out</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Inline</legend>
                                <div class="form-group">
                                    <div class="form-check-list">
                                        <div class="checkbox form-check-inline checkbox-inline">
                                            <input type="checkbox" id="exampleCheckInlineStyled1">
                                            <label for="exampleCheckInlineStyled1">1</label>
                                        </div>
                                        <div class="checkbox form-check-inline checkbox-inline">
                                            <input type="checkbox" id="exampleCheckInlineStyled2">
                                            <label for="exampleCheckInlineStyled2">2</label>
                                        </div>
                                        <div class="checkbox form-check-inline checkbox-inline">
                                            <input type="checkbox" id="exampleCheckInlineStyled3" disabled="disabled">
                                            <label for="exampleCheckInlineStyled3">3 (disabled)</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Checked color</legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check-list">
                                                <div class="checkbox checkbox-muted">
                                                    <input type="checkbox" id="exampleCheckColorStyled2">
                                                    <label for="exampleCheckColorStyled2">Style 2</label>
                                                </div>
                                                <div class="checkbox checkbox-primary">
                                                    <input type="checkbox" id="exampleCheckColorStyled3">
                                                    <label for="exampleCheckColorStyled3">Style 3</label>
                                                </div>
                                                <div class="checkbox checkbox-alternate">
                                                    <input type="checkbox" id="exampleCheckColorStyled4">
                                                    <label for="exampleCheckColorStyled4">Style 4</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check-list">
                                                <div class="checkbox checkbox-success">
                                                    <input type="checkbox" id="exampleCheckColorStyledSuccess">
                                                    <label for="exampleCheckColorStyledSuccess">Style Success</label>
                                                </div>
                                                <div class="checkbox checkbox-warning">
                                                    <input type="checkbox" id="exampleCheckColorStyledWarning">
                                                    <label for="exampleCheckColorStyledWarning">Style Warning</label>
                                                </div>
                                                <div class="checkbox checkbox-danger">
                                                    <input type="checkbox" id="exampleCheckColorStyledDanger">
                                                    <label for="exampleCheckColorStyledDanger">Style Danger</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Outlined Style</legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check-list">
                                                <div class="checkbox checkbox-muted checkbox-outlined">
                                                    <input type="checkbox" id="exampleCheckColorStyledOutlined2">
                                                    <label for="exampleCheckColorStyledOutlined2">Style 2</label>
                                                </div>
                                                <div class="checkbox checkbox-primary checkbox-outlined">
                                                    <input type="checkbox" id="exampleCheckColorStyledOutlined3">
                                                    <label for="exampleCheckColorStyledOutlined3">Style 3</label>
                                                </div>
                                                <div class="checkbox checkbox-alternate checkbox-outlined">
                                                    <input type="checkbox" id="exampleCheckColorStyledOutlined4">
                                                    <label for="exampleCheckColorStyledOutlined4">Style 4</label>
                                                </div>
                                                <hr>
                                                <div class="checkbox checkbox-primary checkbox-outlined bw-2">
                                                    <input type="checkbox" id="exampleCheckColorStyledOutlinedBw3">
                                                    <label for="exampleCheckColorStyledOutlinedBw3">Border 2x</label>
                                                </div>
                                                <div class="checkbox checkbox-alternate checkbox-outlined bw-2">
                                                    <input type="checkbox" id="exampleCheckColorStyledOutlinedBw4">
                                                    <label for="exampleCheckColorStyledOutlinedBw4">Border 2x</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check-list">
                                                <div class="checkbox checkbox-success checkbox-outlined">
                                                    <input type="checkbox" id="exampleCheckColorStyledOutlinedSuccess">
                                                    <label for="exampleCheckColorStyledOutlinedSuccess">Style Success</label>
                                                </div>
                                                <div class="checkbox checkbox-warning checkbox-outlined">
                                                    <input type="checkbox" id="exampleCheckColorStyledOutlinedWarning">
                                                    <label for="exampleCheckColorStyledOutlinedWarning">Style Warning</label>
                                                </div>
                                                <div class="checkbox checkbox-danger checkbox-outlined">
                                                    <input type="checkbox" id="exampleCheckColorStyledOutlinedDanger">
                                                    <label for="exampleCheckColorStyledOutlinedDanger">Style Danger</label>
                                                </div>
                                                <hr>
                                                <div class="checkbox checkbox-warning checkbox-outlined bw-2">
                                                    <input type="checkbox" id="exampleCheckColorStyledOutlinedWarningBw">
                                                    <label for="exampleCheckColorStyledOutlinedWarningBw">Border 2x</label>
                                                </div>
                                                <div class="checkbox checkbox-danger checkbox-outlined bw-2">
                                                    <input type="checkbox" id="exampleCheckColorStyledOutlinedDangerBw">
                                                    <label for="exampleCheckColorStyledOutlinedDangerBw">Border 2x</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Solid Style</legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check-list">
                                                <div class="checkbox checkbox-muted checkbox-solid">
                                                    <input type="checkbox" id="exampleCheckColorStyledSolid2">
                                                    <label for="exampleCheckColorStyledSolid2">Style 2</label>
                                                </div>
                                                <div class="checkbox checkbox-primary checkbox-solid">
                                                    <input type="checkbox" id="exampleCheckColorStyledSolid3">
                                                    <label for="exampleCheckColorStyledSolid3">Style 3</label>
                                                </div>
                                                <div class="checkbox checkbox-alternate checkbox-solid">
                                                    <input type="checkbox" id="exampleCheckColorStyledSolid4">
                                                    <label for="exampleCheckColorStyledSolid4">Style 4</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check-list">
                                                <div class="checkbox checkbox-success checkbox-solid">
                                                    <input type="checkbox" id="exampleCheckColorStyledSolidSuccess">
                                                    <label for="exampleCheckColorStyledSolidSuccess">Style Success</label>
                                                </div>
                                                <div class="checkbox checkbox-warning checkbox-solid">
                                                    <input type="checkbox" id="exampleCheckColorStyledSolidWarning">
                                                    <label for="exampleCheckColorStyledSolidWarning">Style Warning</label>
                                                </div>
                                                <div class="checkbox checkbox-danger checkbox-solid">
                                                    <input type="checkbox" id="exampleCheckColorStyledSolidDanger">
                                                    <label for="exampleCheckColorStyledSolidDanger">Style Danger</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Radios</h5>
                    </div>
                    <div class="card-body">
                        <form action=";" class="cozy">
                            <fieldset>
                                <legend class="small bold-text uppercase">Default unstyle</legend>
                                <div class="form-group">
                                    <div class="form-check-list">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="checked">
                                            <label class="form-check-label" for="exampleRadios1">Default radio</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
                                            <label class="form-check-label" for="exampleRadios2">Second default radio</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="disabled">
                                            <label class="form-check-label" for="exampleRadios3">Disabled radio</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="small bold text-uppercase">Inline</legend>
                                <div class="form-group">
                                    <div class="form-check-list">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                            <label class="form-check-label" for="inlineRadio1">1</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                            <label class="form-check-label" for="inlineRadio2">2</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled="disabled">
                                            <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Bootstrap custom</legend>
                                <div class="form-group">
                                    <div class="form-check-list">
                                        <div class="form-check custom-control custom-radio">
                                            <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                                            <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
                                        </div>
                                        <div class="form-check custom-control custom-radio">
                                            <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                                            <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
                                        </div>
                                        <div class="form-check custom-control custom-radio">
                                            <input type="radio" id="customRadioDisabled" name="customRadio" class="custom-control-input" disabled="disabled">
                                            <label class="custom-control-label" for="customRadioDisabled">Toggle this (disabled) radio</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Styled Radios</h5>
                    </div>
                    <div class="card-body">
                        <form action=";" class="cozy">
                            <fieldset>
                                <legend class="bold small text-uppercase">Default style</legend>
                                <div class="form-group">
                                    <div class="form-check-list">
                                        <div class="radio">
                                            <input type="radio" id="exampleRadioStyled1" name="defaultStyleRadio">
                                            <label for="exampleRadioStyled1">Check me out</label>
                                        </div>
                                        <div class="radio">
                                            <input type="radio" id="exampleRadioStyled2" name="defaultStyleRadio">
                                            <label for="exampleRadioStyled2">Check me out</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Inline</legend>
                                <div class="form-group">
                                    <div class="form-check-list">
                                        <div class="radio form-check-inline radio-inline">
                                            <input type="radio" id="exampleRadioInlineStyled1" name="inlineStyleRadio">
                                            <label for="exampleRadioInlineStyled1">1</label>
                                        </div>
                                        <div class="radio form-check-inline radio-inline">
                                            <input type="radio" id="exampleRadioInlineStyled2" name="inlineStyleRadio">
                                            <label for="exampleRadioInlineStyled2">2</label>
                                        </div>
                                        <div class="radio form-check-inline radio-inline">
                                            <input type="radio" id="exampleRadioInlineStyled3" name="inlineStyleRadio" disabled="disabled">
                                            <label for="exampleRadioInlineStyled3">3 (disabled)</label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Checked color</legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check-list">
                                                <div class="radio radio-muted">
                                                    <input type="radio" id="exampleRadioColorStyled2" name="colorCheckStyleRadio">
                                                    <label for="exampleRadioColorStyled2">Style 2</label>
                                                </div>
                                                <div class="radio radio-primary">
                                                    <input type="radio" id="exampleRadioColorStyled3" name="colorCheckStyleRadio">
                                                    <label for="exampleRadioColorStyled3">Style 3</label>
                                                </div>
                                                <div class="radio radio-alternate">
                                                    <input type="radio" id="exampleRadioColorStyled4" name="colorCheckStyleRadio">
                                                    <label for="exampleRadioColorStyled4">Style 4</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check-list">
                                                <div class="radio radio-success">
                                                    <input type="radio" id="exampleRadioColorStyledSuccess" name="colorCheckStyleRadio2">
                                                    <label for="exampleRadioColorStyledSuccess">Style Success</label>
                                                </div>
                                                <div class="radio radio-warning">
                                                    <input type="radio" id="exampleRadioColorStyledWarning" name="colorCheckStyleRadio2">
                                                    <label for="exampleRadioColorStyledWarning">Style Warning</label>
                                                </div>
                                                <div class="radio radio-danger">
                                                    <input type="radio" id="exampleRadioColorStyledDanger" name="colorCheckStyleRadio2">
                                                    <label for="exampleRadioColorStyledDanger">Style Danger</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend class="bold small text-uppercase">Outlined Style</legend>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check-list">
                                                <div class="radio radio-muted radio-outlined">
                                                    <input type="radio" id="exampleRadioColorStyledOutlined2" name="colorOutlineStyleRadio">
                                                    <label for="exampleRadioColorStyledOutlined2">Style 2</label>
                                                </div>
                                                <div class="radio radio-primary radio-outlined">
                                                    <input type="radio" id="exampleRadioColorStyledOutlined3" name="colorOutlineStyleRadio">
                                                    <label for="exampleRadioColorStyledOutlined3">Style 3</label>
                                                </div>
                                                <div class="radio radio-alternate radio-outlined">
                                                    <input type="radio" id="exampleRadioColorStyledOutlined4" name="colorOutlineStyleRadio">
                                                    <label for="exampleRadioColorStyledOutlined4">Style 4</label>
                                                </div>
                                                <hr>
                                                <div class="radio radio-primary radio-outlined bw-2">
                                                    <input type="radio" id="exampleRadioColorStyledOutlinedBw3" name="colorOutlineStyleRadio">
                                                    <label for="exampleRadioColorStyledOutlinedBw3">Border 2x</label>
                                                </div>
                                                <div class="radio radio-alternate radio-outlined bw-2">
                                                    <input type="radio" id="exampleRadioColorStyledOutlinedBw4" name="colorOutlineStyleRadio">
                                                    <label for="exampleRadioColorStyledOutlinedBw4">Border 2x</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <div class="form-check-list">
                                                <div class="radio radio-success radio-outlined">
                                                    <input type="radio" id="exampleRadioColorStyledOutlinedSuccess" name="colorOutlineStyleRadio2">
                                                    <label for="exampleRadioColorStyledOutlinedSuccess">Style Success</label>
                                                </div>
                                                <div class="radio radio-warning radio-outlined">
                                                    <input type="radio" id="exampleRadioColorStyledOutlinedWarning" name="colorOutlineStyleRadio2">
                                                    <label for="exampleRadioColorStyledOutlinedWarning">Style Warning</label>
                                                </div>
                                                <div class="radio radio-danger radio-outlined">
                                                    <input type="radio" id="exampleRadioColorStyledOutlinedDanger" name="colorOutlineStyleRadio2">
                                                    <label for="exampleRadioColorStyledOutlinedDanger">Style Danger</label>
                                                </div>
                                                <hr>
                                                <div class="radio radio-warning radio-outlined bw-2">
                                                    <input type="radio" id="exampleRadioColorStyledOutlinedWarningBw" name="colorOutlineStyleRadio2">
                                                    <label for="exampleRadioColorStyledOutlinedWarningBw">Border 2x</label>
                                                </div>
                                                <div class="radio radio-danger radio-outlined bw-2">
                                                    <input type="radio" id="exampleRadioColorStyledOutlinedDangerBw" name="colorOutlineStyleRadio2">
                                                    <label for="exampleRadioColorStyledOutlinedDangerBw">Border 2x</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Text Addons</h5>
                    </div>
                    <div class="card-body">
                        <form action=";">
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Left text addon</label>
                                <div class="col-lg-9">
                                    <div class="input-group">
											<span class="input-group-prepend">
												<span class="input-group-text">@</span>
											</span>
                                        <input type="text" class="form-control" placeholder="Left addon">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Left addon multiple</label>
                                <div class="col-lg-9">
                                    <div class="input-group">
											<span class="input-group-prepend">
												<span class="input-group-text">$</span>
												<span class="input-group-text">0.00</span>
											</span>
                                        <input type="text" class="form-control" placeholder="Multiple left addon">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Right text addon</label>
                                <div class="col-lg-9">
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="Right addon">
                                        <span class="input-group-append">
												<span class="input-group-text">@example.com</span>
											</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Right addon multiple</label>
                                <div class="col-lg-9">
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="Multiple right addon">
                                        <span class="input-group-append">
												<span class="input-group-text">$</span>
												<span class="input-group-text">0.00</span>
											</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Left and Right addons</label>
                                <div class="col-lg-9">
                                    <div class="input-group">
											<span class="input-group-prepend">
												<span class="input-group-text">$</span>
											</span>
                                        <input type="text" class="form-control" placeholder="Multiple right addon">
                                        <span class="input-group-append">
												<span class="input-group-text">0.00</span>
											</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">With textarea</label>
                                <div class="col-lg-9">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Comments</span>
                                        </div>
                                        <textarea class="form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Icons Addon</h5>
                    </div>
                    <div class="card-body">
                        <form action=";">
                            <fieldset class="mb-3">
                                <legend class="small bold text-uppercase">Static Icons</legend>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Left icon addon</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
												<span class="input-group-prepend">
													<span class="input-group-text">
														<i class="fas fa-user"></i>
													</span>
												</span>
                                            <input type="text" class="form-control" placeholder="Left icon addon">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Left icon + text</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
												<span class="input-group-prepend">
													<span class="input-group-text">Options</span>
													<span class="input-group-text">
														<i class="fas fa-cog"></i>
													</span>
												</span>
                                            <input type="text" class="form-control" placeholder="Multiple left icon addon">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Right icon addon</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Right addon">
                                            <span class="input-group-append">
													<span class="input-group-text">
														<i class="far fa-calendar-alt"></i>
													</span>
												</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Right icon + text</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Multiple right icon addon">
                                            <span class="input-group-append">
													<span class="input-group-text">Options</span>
													<span class="input-group-text">
														<i class="fas fa-cog"></i>
													</span>
												</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Left and Right addons</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
												<span class="input-group-prepend">
													<span class="input-group-text">
														<i class="fas fa-user"></i>
													</span>
												</span>
                                            <input type="text" class="form-control" placeholder="Multiple right icon addon">
                                            <span class="input-group-append">
													<span class="input-group-text">
														<i class="fas fa-cog"></i>
													</span>
												</span>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset class="mb-3">
                                <legend class="small bold text-uppercase">Animated Icons</legend>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Left icon addon</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
												<span class="input-group-prepend">
													<span class="input-group-text">
														<i class="fas fa-sync fa-spin"></i>
													</span>
												</span>
                                            <input type="text" class="form-control" placeholder="Left icon addon">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Right icon addon</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Right addon">
                                            <span class="input-group-append">
													<span class="input-group-text">
														<i class="fas fa-spinner fa-pulse"></i>
													</span>
												</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Left and Right addons</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
												<span class="input-group-prepend">
													<span class="input-group-text">
														<i class="fas fa-sync fa-spin"></i>
													</span>
												</span>
                                            <input type="text" class="form-control" placeholder="Multiple right icon addon">
                                            <span class="input-group-append">
													<span class="input-group-text">
														<i class="fas fa-cog fa-spin"></i>
													</span>
												</span>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>

                <div class="card mb-4 shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Dropdown Addons</h5>
                    </div>
                    <div class="card-body">
                        <form action=";">
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Left dropdown addon</label>
                                <div class="col-lg-9">
                                    <div class="input-group clean-group">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-contrast dropdown-toggle" type="button" data-toggle="dropdown">Action</button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                                <div role="separator" class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Separated link</a>
                                            </div>
                                        </div>
                                        <input type="text" class="form-control" placeholder="Left addon">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Right dropdown addon</label>
                                <div class="col-lg-9">
                                    <div class="input-group clean-group">
                                        <input type="text" class="form-control" placeholder="Right addon">
                                        <div class="input-group-append">
                                            <button class="btn btn-contrast dropdown-toggle" type="button" data-toggle="dropdown">Action</button>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                                <div role="separator" class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Separated link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label col-lg-3">Left and right dropdown addon</label>
                                <div class="col-lg-9">
                                    <div class="input-group clean-group">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-contrast dropdown-toggle" type="button" data-toggle="dropdown">Action</button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                                <div role="separator" class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Separated link</a>
                                            </div>
                                        </div>
                                        <input type="text" class="form-control" placeholder="Left and right addon">
                                        <div class="input-group-append">
                                            <button class="btn btn-contrast dropdown-toggle" type="button" data-toggle="dropdown">Action</button>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                                <div role="separator" class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Separated link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card shadow-box">
                    <div class="card-header bg-contrast">
                        <h5 class="mb-0">Button Addons</h5>
                    </div>
                    <div class="card-body">
                        <form action=";">
                            <fieldset class="mb-3">
                                <legend class="small bold text-uppercase">Clean group</legend>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Left text addon</label>
                                    <div class="col-lg-9">
                                        <div class="input-group clean-group">
												<span class="input-group-prepend">
													<button class="btn btn-contrast" type="button">Button</button>
												</span>
                                            <input type="text" class="form-control" placeholder="Left addon">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Right text addon</label>
                                    <div class="col-lg-9">
                                        <div class="input-group clean-group">
                                            <input type="text" class="form-control" placeholder="Right addon">
                                            <span class="input-group-append">
													<button class="btn btn-contrast" type="button">Button</button>
												</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Left and Right addons</label>
                                    <div class="col-lg-9">
                                        <div class="input-group clean-group">
												<span class="input-group-prepend">
													<button class="btn btn-contrast" type="button">Button</button>
												</span>
                                            <input type="text" class="form-control" placeholder="Multiple right addon">
                                            <span class="input-group-append">
													<button class="btn btn-contrast" type="button">Button</button>
												</span>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset class="mb-3">
                                <legend class="small bold text-uppercase">Colored buttons</legend>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Left text addon</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
												<span class="input-group-prepend">
													<button class="btn btn-primary" type="button">Button</button>
												</span>
                                            <input type="text" class="form-control" placeholder="Left addon">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Right text addon</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="Right addon">
                                            <span class="input-group-append">
													<button class="btn btn-warning" type="button">Button</button>
												</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-3">Left and Right addons</label>
                                    <div class="col-lg-9">
                                        <div class="input-group">
												<span class="input-group-prepend">
													<button class="btn btn-primary" type="button">Button</button>
												</span>
                                            <input type="text" class="form-control" placeholder="Multiple right addon">
                                            <span class="input-group-append">
													<button class="btn btn-danger" type="button">Button</button>
												</span>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

    
    

    </div>

    
    <footer class="site-footer section text-center  b-t">
    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-md-6 text-center mx-auto">
                <img src="../img/logo.png" alt="" class="logo">
                <h2 class="extra-bold text-dark mb-4">DashCore</h2>
                <p class="mt-2 mb-0 text-secondary small">© 2018 <a class="brand bold" target="_blank"
                        href="https://5studios.net">5studios.net</a>. All Rights Reserved</p>
            </div>
        </div>
    </div>
</footer>

</main><!-- themeforest:js -->
    <script src="../js/01.cookie-consent-util.js"></script>
    <script src="../js/02.1.cookie-consent-themes.js"></script>
    <script src="../js/02.2.cookie-consent-custom-css.js"></script>
    <script src="../js/02.3.cookie-consent-informational.js"></script>
    <script src="../js/02.4.cookie-consent-opt-out.js"></script>
    <script src="../js/02.5.cookie-consent-opt-in.js"></script>
    <script src="../js/02.6.cookie-consent-location.js"></script>
    <script src="../js/card.js"></script>
    <script src="../js/counterup2.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/noframework.waypoints.js"></script>
    <script src="../js/odometer.min.js"></script>
    <script src="../js/prism.js"></script>
    <script src="../js/simplebar.js"></script>
    <script src="../js/swiper.js"></script>
    <script src="../js/popper.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/jquery.easing.min.js"></script>
    <script src="../js/jquery.validate.js"></script>
    <script src="../js/jquery.smartWizard.js"></script>
    <script src="../js/plugins/jquery.animatebar.js"></script>
    <script src="../js/feather.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/aos.js"></script>
    <script src="../js/typed.js"></script>
    <script src="../js/jquery.magnific-popup.js"></script>
    <script src="../js/cookieconsent.min.js"></script>
    <script src="../js/common-script.js"></script>
    <script src="../js/forms.js"></script>
    <script src="../js/stripe-bubbles.js"></script>
    <script src="../js/stripe-menu.js"></script>
    <script src="../js/cc.js"></script>
    <script src="../js/pricing.js"></script>
    <script src="../js/shop.js"></script>
    <script src="../js/svg.js"></script>
    <script src="../js/site.js"></script>
    <script src="../js/03.demo.js"></script><!-- endinject -->
</body>
</html>
